<template>
  <el-container class="el-wrapper">
    <el-aside width="200px" class="aside-wrapper">
      <el-menu background-color="#545c64" default-active="1" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">
            <router-link to="/layout/echarts">图表</router-link>
          </span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-document"></i>
          <span slot="title">
            <router-link to="/layout/monitor">内容监控</router-link>
          </span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container class="el-wrapper-content">
      <el-header class="header">Header</el-header>
      <el-main class="main">
        <router-view></router-view>
      </el-main>
      <!-- <el-footer class="footer">Footer</el-footer> -->
    </el-container>
  </el-container>
</template>
<script>
export default {
  components: {},
}
</script>
<style lang="scss" scoped>
.el-wrapper {
  width: 100%;
  height: 100%;
  .aside-wrapper {
    // border-right: 1px solid #000;
    .el-menu {
      height: 100%;
    }
    a {
      width: 100%;
      height: 100%;
      color: white;
    }
    .router-link-exact-active {
      color: #ffd04b;
    }
  }
  .el-wrapper-content {
    .header {
      background: #eee;
    }
  }
}
</style>
